<template>
    <scroll-view class="scroll-view" :scroll-y="true">
        <viwe class="container">
            <view v-for="(message, idx) of messages" :class='{ item: true, user: message.role == "user" }'
                :id="`message${idx}`">
                {{ message.content }}
            </view>
        </viwe>
    </scroll-view>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    props: ["messages"],
    data() {
        return {
            topOffset: 0
        }
    },
    methods: {
        scrollToBottom() {
            const idx = this.messages.length - 1
            this.$nextTick(() => {
                uni.pageScrollTo({
                    selector: `#message${idx}`
                })
            })
        }
    }
});
</script>

<style scoped>
.scroll-view {
    box-sizing: border-box;
    padding-top: 165rpx;
    padding-bottom: 220rpx;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40rpx;
    padding-right: 40rpx;
}

.item {
    background-color: rgba(0, 0, 0, .05);
    border: 2rpx solid #dedede;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

.user {
    align-self: flex-end;
    background-color: #e7f8ff;
}
</style>